<template>
  <div class="photo-album">
    <span class="go-back" @click="goBack">
      <i class="iconfont makerjiantouarrowhead7"></i>
    </span>
    <div class="photo-album-banner">
      <nut-swiper
        direction="horizontal"
        :swiperData="dataImgItem"
        :lazyLoad="true"
        :paginationVisible="true"
        ref="demo5"
      >
        <div v-for="(item,index) in dataImgItem" :key="index" class="nut-swiper-slide">
          <img
            :data-src="item.url"
            style="max-width:100%; max-height:100%"
            class="nut-img-lazyload"
          />
        </div>
      </nut-swiper>
    </div>
    <div class="album-info">
      <div class="album-header">
        <div class="album-money">
          <span>
            <i class="iconfont makerqian"></i>
            {{ transactionPrice ? transactionPrice : productDetail.salePrice }}
          </span>

          <span class="album-old-money" v-if="productDetail.salePrice">
            <i class="iconfont makerqian"></i>
            {{ productDetail.price }}
          </span>
        </div>
        <div class="album-title">{{ productDetail.name }}</div>
        <div class="album-sub">{{ productDetail.introduction}}</div>
      </div>
      <div class="album-select">
        <span>已选</span>
        <span>
          <span class="types-list">{{ productTypes }} {{ productNum }}件</span>
          <i class="iconfont makerarrow-right" @click="selectAlbum"></i>
        </span>
      </div>
      <div class="album-detail" @click="showDeatialBtn">
        <div class="album-detail-title">商品详情</div>
        <div class="album-foot">
          <img :src="productDetail.cover" alt />
          <div>
            <span>{{ productDetail.name }}</span>
            <span>{{ productDetail.introduction }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!showDetail" class="add-btn">
      <nut-button block shape="circle" @click="handleGetTheCotton">立即定制</nut-button>
    </div>
    <div v-if="showDetail">
      <div v-for="(item, index) in detailList" :key="index" class="show-more-detai">
        <img :src="item" alt />
      </div>
    </div>
    <nut-actionsheet :is-visible="isVisible">
      <div slot="custom" class="custom-wrap">
        <span class="close-btn" @click="closeCustom">
          <i class="iconfont makerguanbi"></i>
        </span>

        <pruduct-select
          :type-list="typeSelectlist"
          @handleSelect="handleSelect"
          :transaction-price="transactionPrice"
          :product-detail="productDetail"
          @handleChangeVal="handleChangeVal"
        />
        <!-- <address-select @cancelAddr="handleCancelAddr" @ensureAdd="handleEnsureAdd" /> -->
      </div>
    </nut-actionsheet>
  </div>
</template>

<script>
import { cottonDetail } from '@/api/cotton-in/index.js';
import PruductSelect from './components/PruductSelect';

export default {
  name: 'CottonDetail',
  components: {
    PruductSelect,
  },
  data() {
    return {
      productId: null, // 产品ID
      productDetail: {}, // 产品详情
      typeSelectlist: [], // 类型列表
      transactionPrice: 0 , // 成交价
      priceMateData: [], // 价格原数据
      productNum: 1, // 购买数量
      productTypes: '', // 最终选择的购买类型
      isVisible: false,
      showDetail: false, // 展示详情
      dataImgItem: [],
      detailList: [
        '//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg',
        '//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg',
        '//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg',
      ],
    };
  },
  created() {
    this.productId = this.$route.params.id || null;
    this.productId && this.getDetail();
  },
  mounted() {},
  methods: {
    // 获取详情
    getDetail() {
      const obj = {
        spuId: this.productId,
      };
      cottonDetail(obj).then((res) => {
        if (res.spu && res.spu.banners && res.spu.banners.length) {
          this.dataImgItem = res.spu.banners;
        }
        if (
          res.metadata &&
          res.metadata.indices &&
          res.metadata.indices.length
        ) {
          this.priceMateData = res.metadata.indices;
        }
        if (res.spu) {
          this.productDetail = res.spu;
          this.transactionPrice = this.productDetail.salePrice;
        }
        if (
          res.metadata &&
          res.metadata.propertyGroups &&
          res.metadata.propertyGroups.length
        ) {
          this.typeSelectlist = res.metadata.propertyGroups.map((item) => {
            return {
              ...item,
              activeId: parseInt(item.values[0].valueId),
              title: item.key.name,
              list: item.values.map((innerItem) => {
                return {
                  id: parseInt(innerItem.valueId),
                  name: innerItem.value,
                };
              }),
            };
          });
          this.getPrice();
        }
      });
    },
    // 结算价格
    getPrice() {
      let str = '';
      let typeStr = '';
      this.typeSelectlist.forEach((item) => {
        str += item.activeId + '.';
        item.list &&
          item.list.forEach((innerItem) => {
            if (item.activeId === innerItem.id) {
              typeStr += innerItem.name + ',';
            }
          });
      });

      this.productTypes = typeStr;
      str = str.slice(0, str.length - 1);
      let skusID = null;
      str &&
        this.priceMateData.find((item) => {
          if (item.key === str) {
            skusID = item.skuId;
          }
        });
      if (
        skusID &&
        this.productDetail &&
        this.productDetail.skus &&
        this.productDetail.skus.length
      ) {
        this.productDetail.skus.forEach((item) => {
          if (item.skuId === skusID) {
            this.transactionPrice =parseFloat(item.salePrice) ;
          }
        });
      }
    },
    // 购买数量
    handleChangeVal(n) {
      this.productNum = n;
      this.transactionPrice = this.transactionPrice * n;
    },
    // 返回
    goBack() {
      if (this.showDetail) {
        this.showDetail = false;
        return;
      }
      this.$router.go(-1);
    },
    // 点击看详情
    showDeatialBtn() {
      this.showDetail = !this.showDetail;
    },
    // 选择类型
    handleSelect() {
      this.getPrice();
    },
    // 立即定制
    handleGetTheCotton() {
      this.isVisible = true;
    },
    goTO() {
      // console.log(this.$route);
    },
    // handleSave() {},
    selectAlbum() {
      this.isVisible = !this.isVisible;
    },
    // 关闭对话框
    closeCustom() {
      this.isVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.photo-album {
  width: 100vw;
  height: 100vh;
  position: relative;
  .go-back {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    color: #ffffff;
    z-index: 1000;
  }
  // overflow: auto;
  // position: relative;
  .photo-album-banner {
    width: 100vw;
    height: 100vw;
    .nut-swiper {
      position: relative;
      overflow: hidden;
      height: 100%;
      /* width: 100%; */
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .album-info {
    width: 100%;
    margin-bottom: 20px;
    // height: 40vh;
    // background: pink;
    .album-header {
      width: 100%;
      background-color: #ffffff;
      padding-bottom: 10px;
      margin-bottom: 5px;
      .album-money {
        height: 7vh;
        padding: 0 20px;
        line-height: 7vh;
        & > span:first-child {
          color: #fd5e4b;
          font-size: 22px;
          font-weight: bolder;
          margin-right: 10px;
          i {
            font-size: 16px;
          }
        }
        .album-old-money {
          font-size: 14px;
          color: #a9a6a6;
          i {
            font-size: 14px;
          }
          position: relative;
          &::after {
            position: absolute;
            left: 3%;
            width: 94%;
            height: 0.5px;
            top: 1vh;
            // bottom: 0px;
            content: '';
            background-color: #ccc;
            // box-shadow: 2px 2px 5px #000;
          }
        }
      }
      .album-title {
        padding: 0 20px;
        height: 4vh;
        line-height: 4vh;
        color: #1e1e1e;
        font-size: 18px;
      }
      .album-sub {
        padding: 0 20px;
        font-size: 12px;
        color: #a4a4a4;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
    .album-select {
      height: 8vh;
      padding: 0 20px;
      display: flex;
      background-color: #ffffff;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      margin-bottom: 10px;
      & > span:first-child {
        font-size: 16px;
        color: #1e1e1e;
        width: 60px;
      }
      & > span:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .types-list {
          width: 70vw;
          // text-overflow: ellipsis;
          overflow: auto;
          white-space: nowrap;
          text-align: right;
        }
        flex: 1;
        color: #b3b3b3;
        overflow: hidden;

        position: relative;
        padding-right: 20px;
        i {
          position: absolute;
          right: 0;
          width: 20px;
          height: 100%;
          // line-height: 3.1vh;
          background-color: #ffffff;
        }
      }
    }
    .album-detail {
      background-color: #ffffff;
      .album-detail-title {
        padding: 0 20px;
        height: 4vh;
        line-height: 4vh;
        font-size: 12px;
        color: #1e1e1e;
      }
      .album-foot {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 20px 20px;
        img {
          width: 50px;
          height: 50px;
          background-color: pink;
          border-radius: 50%;
          overflow: hidden;
        }
        & > div {
          margin-left: 10px;
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: center;
          & > span:first-child {
            color: #1e1e1e;
            font-size: 16px;
            margin-bottom: 0.5vh;
          }
          & > span:last-child {
            color: #898989;
            font-size: 10px;
          }
        }
      }
    }
  }
  .add-btn {
    width: 80vw;
    margin-top: 5vh;
    margin-left: 10vw;
    margin-bottom: 10vw;
    .nut-button {
      background: #ff7e00;
    }
  }
  .custom-wrap {
    width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    padding: 0 5vw;
    position: relative;
    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      display: block;
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      color: #ccc;
      i {
        font-size: 16px;
      }
    }
  }
}
.show-more-detai {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
  img {
    width: 100%;
    height: auto;
  }
}
</style>
<style>
.nut-actionsheet-panel {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background-color: #ffffff;
}
</style>
